<template>
  <div class="replenishmentPickingList">
    <div class="hbb-pickingRecordBox" style="padding-bottom: 2.32rem">
      <div class="customer-title">
        {{cloudShopName}}
      </div>
      <!-- 选择时间部分 -->
      <div class="Date-view">
        <div class="date-view-box start-date" @click="openDateDialog(1)">
          <div class="label">开始时间</div>
          <div class="time">{{startDate_text}}</div>
        </div>
        <div class="date-view-box" @click="openDateDialog(2)">
          <div class="label">截止时间</div>
          <div class="time">{{endDate_text}}</div>
        </div>
      </div>
      <!-- 合计部分 -->
      <div class="hbb-total">
        <div v-if="isOpenCashAccount" class="">
          <span class="one">充值余额(元)</span>
          <span class="two">{{cashAccountRemain_text}}</span>
        </div>
        <div class="">
          <span class="one">领料金额(元)</span>
          <span class="two">{{pickingTotalAmount_text}}</span>
        </div>
        <div v-if="isOpenScore" class="">
          <span class="">可兑换积分</span>
          <span class="two">{{replenishmentScore}}</span>
        </div>
      </div>
      <!-- 列表部分 -->
      <div class="hbb-dataList" v-if="pickingDataList.length > 0">
        <div class="group">
          <div class="info">
            <div class="header">
              <div class="one">
                商品信息
                <div class="all" @click="goReplenishmentDetail">全部</div>
              </div>
              <div class="two">库存</div>
              <div class="three">领料数</div>
              <div class="four">单价</div>
            </div>
            <div class="grounp" v-for="(oneItem, item_index) in pickingDataList" :key="item_index" @click="goPickingDetail(oneItem)">
              <div class="one" style="flex-wrap: wrap; justify-content: flex-start;">
                <b class="hbb-clearLeft" style="margin-top:.04rem" @click.stop='on_partInfo_click(oneItem)'>
                  {{oneItem.brandName}} {{oneItem.displayPartsNo}}
                </b>
                <b class="hbb-xilie" v-if="oneItem.seriesName.length>0">{{oneItem.seriesName}}</b>
              </div>
              <div class="two" style="color:#e74c3c">{{oneItem.stockCount}}</div>
              <div :class="oneItem.pickingQty<0 ? 'three red' : 'three'">
                {{oneItem.pickingQty}}
              </div>
              <div class="four">
                ¥{{oneItem.pickingPrice_text}}
              </div>
              <img class="hbb-jiant" src="../assets/images/arrow_rightGrey.png">
            </div>
          </div>
        </div>
      </div>
      <div class="hbb-noneRecord" v-if="pickingDataList.length==0">暂无领料记录</div>
    </div>
    <!-- 商品详情弹层 -->
    <partItemDetailDialog v-if="partItemDetailDialog_launched" :shopDetail_input="partItemDetailDialog_input" :shopDetail_mode="partItemDetailDialog_initMode" @close="on_partItemInfoDialog_close">
    </partItemDetailDialog>
    <!-- 底部按钮 -->
    <!-- <div class="sdw-buttonFool">
      <div class="rightAway-box" @click="jumpToPickingRightAway">
        <div class="left">
          保养总台次 <span class="percent">{{PickingAutoBriefObj.totalAutoCount}}</span> 台，可“马上装”占比 <span class="percent">{{PickingAutoBriefObj.fullPickingPercent}}%</span>
        </div>
        <div class="right">
          详情
        </div>
      </div>
      <div class='sdw-buttonBox'>
        <div class="btn" @click="navigateBackFn">关 闭</div>
      </div>
    </div> -->

    <van-overlay :show="isShowdateTimePickerDialog" @click.stop="isShowdateTimePickerDialog = false">
      <div class="dateTimePicker-view" v-if="isShowdateTimePickerDialog" @click.stop="comReturnFn">
        <van-datetime-picker title="选择年月日" @cancel="isShowdateTimePickerDialog = false" @confirm="selectDateFn" type="date" :value="currentDate" :formatter="formatter" />
      </div>
    </van-overlay>
  </div>
</template>

<script>
import { mapState, mapGetters } from "vuex";
import partItemDetailDialog from "../components/partItemDetailDialog";
export default {
  name: "",
  data() {
    return {
      query_date: this.$com_util.getQueryString("date") || null, //日期 页面入参:
      query_teamid: this.$com_util.getQueryString("teamid") || null, //日期 页面入参:
      currentDate: new Date(),
      formatter(type, value) {
        if (type === "year") {
          return `${value}年`;
        } else if (type === "month") {
          return `${value}月`;
        }
        return value;
      },
      cloudShopId: 0, // 云店id
      judgeTime: "", // 开始时间最大选择当天
      startDate: "", // 开始时间
      endDate: "", // 截止时间
      startDate_text: "", // 开始时间 【只用作渲染】
      endDate_text: "", // 结束时间 【只用作渲染】
      pickingDataList: [], // 领料记录的列表
      partItemDetailDialog_launched: false, // 是否启动商品详情的弹层组件
      partItemDetailDialog_initMode: "", // 启动商品详情弹层的模式 partItemInfo：商品详情 partItemFitAuto：车型适配
      partItemDetailDialog_input: {}, // 启动商品详情弹层的 入参
      isOpenCashAccount: false, //是否开放铺货现金帐
      cashAccountRemain: 0, //现金帐余额
      cashAccountRemain_text: "", //现金帐余额
      isOpenScore: false, //是否开放铺货积分
      replenishmentScore: 0, //可用积分
      pickingTotalAmount: 0, //领料金额
      pickingTotalAmount_text: "", //领料金额
      cloudShopName: "",
      PickingAutoBriefObj: {}, // 马上装的信息
      openDateDialogType: 0, // 1是开始时间  2是结束时间
      isShowdateTimePickerDialog: false,
    };
  },
  created() {
    var that = this;

    this.initPage();
  },
  computed: {
    ...mapGetters([
      "cangpei_param_gcd",
      "cangpei_param_ccd",
      "cangpei_param_ucd",
    ])
  },
  components: {
    partItemDetailDialog,
  },
  mounted() {
    this.GetFullPickingAutoBrief(); // 取得指定期间的马上装汇总信息
  },
  methods: {
    comReturnFn() {
      return;
    },
    // 选择日期控件
    selectDateFn(value) {
      let data = value;
      let serviceDate = this.$com_util.getNowDateTime(data, 1); // 给服务端传的时间格式
      let viewDate = this.$com_util.getNowDateTime(data, 2); // 页面展示的时间格式
      if (this.openDateDialogType == 1) {
        this.startDate = serviceDate;
        this.startDate_text = viewDate;
      } else {
        this.endDate = serviceDate;
        this.endDate_text = viewDate;
      }
      this.GetReplenishmentPickingList();
      this.isShowdateTimePickerDialog = false;
    },
    // 打开日期控件
    openDateDialog(type) {
      console.log("type", type);
      this.openDateDialogType = type;
      if (type == 1) {
        console.log("this.startDate", this.startDate);
        let now_timeStamp = this.$com_util.dateToTimeStamp(this.startDate);
        // console.log('now_timeStamp', now_timeStamp);

        // this.currentDate = now_timeStamp;
      } else {
        let now_timeStamp = this.$com_util.dateToTimeStamp(this.endDate);
        // this.currentDate = now_timeStamp;
      }
      this.isShowdateTimePickerDialog = true;
      console.log(
        "this.isShowdateTimePickerDialo12121212g",
        this.isShowdateTimePickerDialog
      );
    },
    bindDateChange: function (e) {
      var currentMode = e.target.dataset.mode;
      this.getNewDate(new Date(e.detail.value), currentMode);
    },
    initPage() {
      // date 作为指定时间做为参数 如果有那就以入参为标准 则以当前日期为标准
      if (this.query_date) {
        this.getNewDate(this.query_date, 0);
      } else {
        this.getNewDate(new Date(), 0);
      }
    },
    // 返回
    navigateBackFn() {
      // wx.navigateBack({ delta: 1 });
    },
    // 跳转到马上装页面
    jumpToPickingRightAway() {
      var url = `/subpackage_vehicle/pages/customer-picking-rightAway/main?customerTeamId=${this.query_teamid}&startDate=${this.startDate}&endDate=${this.endDate}`;
    },
    // 去往铺货库存
    goReplenishmentDetail(e) {
      this.$router.push({
        path: `/replenishmentDetailList`,
        query: {
          teamid: this.query_teamid,
        },
      });
    },
    // 去往对应商品的领料明细页面
    goPickingDetail(oneItem) {
      this.$router.push({
        path: `/replenishmentPickingDetail`,
        query: {
          teamid: this.query_teamid,
          sdate: this.startDate,
          edate: this.endDate,
          itemid: oneItem.partItemId,
          itemtype: oneItem.replenishmentBillDetailType,
        },
      });
    },
    // 取经销商名称
    async getSimpleShopInfo(cloudShopId) {
      const res = await this.$appServive({
        url: "/CloudShop/GetSimpleShopInfo",
        data: {
          cloudShopId: cloudShopId,
        },
        isShowLoading: true,
      });
      this.cloudShopName = res.cloudShopName;
    },
    // 取得领料记录
    async GetReplenishmentPickingList() {
      const res = await this.$appServive({
        url: "/Replenishment/GetReplenishmentPickingListV2",
        data: {
          customerTeamId: this.query_teamid,
          startDate: this.startDate,
          endDate: this.endDate,
        },
        isShowLoading: true,
      });
      res.partItems.forEach((x) => {
        x.pickingPrice_text = this.$com_util.formatCurrency(
          x.pickingPrice
        );
      });
      this.isOpenCashAccount = res.isOpenCashAccount;
      this.cashAccountRemain = res.cashAccountRemain;
      this.cashAccountRemain_text = this.$com_util.formatCurrency(
        res.cashAccountRemain
      );
      this.isOpenScore = res.isOpenScore;
      this.replenishmentScore = res.replenishmentScore;
      this.pickingTotalAmount = res.pickingTotalAmount;
      this.pickingTotalAmount_text = this.$com_util.formatCurrency(
        res.pickingTotalAmount
      );
      this.pickingDataList = res.partItems;
      console.log("this.pickingDataList", this.pickingDataList);

      this.cloudShopId = res.cloudShopId;

      let cloudShopId = res.cloudShopId;
      this.getSimpleShopInfo(cloudShopId);
    },
    // 取得指定期间的马上装汇总信息
    async GetFullPickingAutoBrief() {
      const res = await this.$appServive({
        url: "/Replenishment/GetFullPickingAutoBrief",
        data: {
          customerTeamId: this.query_teamid,
          startDate: this.startDate,
          endDate: this.endDate,
        },
        isShowLoading: true,
      });
      this.PickingAutoBriefObj.totalAutoCount = res.totalAutoCount;
      this.PickingAutoBriefObj.fullPickingPercent =
        res.fullPickingPercent;
    },
    getNewDate(time, mode) {
      // 重新优化选择的事件的格式
      // mode==>0：初始化当前时间 1：选择的开始时间 2：选择的截止时间 3:取得开始时间可选的最大时间
      var timestamp = Date.parse(time);
      var date = new Date(timestamp);
      //获取年份
      var Y = date.getFullYear();
      //获取月份
      var M =
        date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1;
      //获取当日日期
      var D = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
      var nowTime_text = Y + "年" + M + "月" + D + "日";
      var nowTime = Y + "-" + M + "-" + D;

      if (mode == 1) {
        this.startDate = nowTime;
        this.startDate_text = nowTime_text;
      } else if (mode == 2) {
        this.endDate = nowTime;
        this.endDate_text = nowTime_text;
      } else if (mode == 3) {
        this.judgeTime = nowTime;
      } else {
        this.startDate = nowTime;
        this.endDate = nowTime;
        this.startDate_text = nowTime_text;
        this.endDate_text = nowTime_text;
      }
      var jStartDate = Date.parse(this.startDate);
      var jendDate = Date.parse(this.endDate);

      if (jStartDate > jendDate) {
        this.startDate = nowTime;
        this.endDate = nowTime;
        this.startDate_text = nowTime_text;
        this.endDate_text = nowTime_text;
      }
      // 指定开始最大日期为今日
      if (mode != 3) {
        this.GetReplenishmentPickingList();
      }
    },
    getTodayDate() {
      // 取得当天日期
      this.getNewDate(new Date(), 3);
    },
    // 启动商品详情弹层
    on_partInfo_click(oneItem) {
      this.partItemDetailDialog_launched = true;
      this.partItemDetailDialog_initMode = "partItemInfo";
      this.partItemDetailDialog_input.shopId = this.cloudShopId;
      this.partItemDetailDialog_input.partItemId = oneItem.partItemId;
    },
    // 关闭弹层
    on_partItemInfoDialog_close() {
      this.partItemDetailDialog_launched = false;
    },
  },
};
</script>

<style scoped>
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

div,
span,
button {
  box-sizing: border-box;
}

.replenishmentPickingList {
  height: 100vh;
}

.hbb-pickingRecordBox {
  display: flex;
  width: 100%;
  flex-direction: column;
  background: #edf1f6;
  height: 100%;
}

.hbb-dateSelect {
  display: flex;
  width: 100%;
  justify-content: center;
  background: #fff;
  padding: 0.2rem 0;
}

.hbb-dateSelect div {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}

.hbb-dateSelect div span {
  line-height: 0.48rem;
  color: #8e8e8e;
  font-size: 0.32rem;
}

.hbb-dateSelect div span.two {
  line-height: 0.64rem;
  color: #181818;
  margin-top: 0.08rem;
  font-size: 0.4rem;
}

.hbb-dataList,
.hbb-dataList .group {
  display: flex;
  width: 100%;
  flex-direction: column;
}

.hbb-dataList .group .time {
  display: flex;
  width: 100%;
  padding: 0.26rem 0.13rem;
  justify-content: center;
  font-size: 0.32rem;
  color: #96a6bc;
}

.hbb-dataList .group .info {
  display: flex;
  width: 100%;
  background: #fff;
  flex-direction: column;
  padding: 0.21rem;
}

.hbb-dataList .group .info .grounp {
  border-top: 1px solid #ebebeb;
}

.hbb-dataList .group .info div.grounp {
  display: flex;
  width: 100%;
  align-items: center;
  padding: 0.4rem 0;
  position: relative;
}

.hbb-dataList .group .info div.header {
  height: 1rem;
  display: flex;
  align-items: center;
  font-size: 0.32rem;
  color: #bcbcbc;
}

.hbb-dataList .group .info div {
  float: left;
  color: #5b5b5b;
}

.hbb-dataList .group .info div b.hbb-clearLeft {
  color: #4084ea;
}

.hbb-dataList .group .info div.one {
  float: left !important;
  width: 46%;
  height: 100%;
  font-size: 0.36rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.hbb-dataList .group .info div.one div.all {
  float: right;
  width: auto;
  padding: 0 0.13rem;
  border: 1px solid #e74c3c;
  box-sizing: border-box;
  border-radius: 0.07rem;
  background: #fff;
  font-size: 0.36rem;
  line-height: 0.37rem;
  text-align: center;
  color: #e74c3c;
}

.hbb-dataList .group .info .header div {
  color: #bcbcbc;
}

.hbb-dataList .group .info div.two {
  width: 12%;
  justify-content: center;
  position: relative;
  font-size: 0.36rem;
  text-align: center;
  align-items: center;
  display: flex;
  align-items: center;
}

.hbb-dataList .group .info div.three {
  width: 18%;
  text-align: center;
  align-items: center;
  font-size: 0.36rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.hbb-dataList .group .info div.four {
  width: 24%;
  text-align: center;
  align-items: center;
  display: flex;
  font-size: 0.36rem;
  justify-content: center;
  align-items: center;
}

.hbb-dataList .group .info div.red {
  color: #e74c3c;
}

.hbb-noneRecord {
  display: flex;
  width: 100%;
  justify-content: center;
  margin: 0.4rem 0;
  color: #a0b0c5;
  font-size: 0.32rem;
}

.hbb-jiant {
  width: 0.16rem;
  height: 0.32rem;
  position: absolute;
  right: 0.13rem;
  top: 50%;
  transform: translateY(-50%);
}

.hbb-kucun {
  margin-left: 0.16rem;
}

.hbb-kucun2 {
  color: #e74c3c !important;
  font-weight: bold;
}

.hbb-total {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  background: #f9f9f9;
  margin-top: 0.26rem;
  padding: 0.4rem 0;
}

.hbb-total div {
  flex: 1;
  display: flex;
  justify-content: flex-start;
  flex-direction: column;
  text-align: center;
}

.hbb-total div span {
  color: #8e8e8e;
  font-size: 0.32rem;
  line-height: 0.37rem;
}

.hbb-dataList div b.first {
  float: left;
  clear: left;
}

.hbb-dataList div b.hbb-clearLeft {
  float: left;
  margin-left: 0;
}

.hbb-total div span.two {
  color: #e74c3c;
  font-size: 0.56rem;
  margin-top: 0.26rem;
  line-height: 0.64rem;
  font-weight: bold;
}

.hbb-xilie {
  border-radius: 0.16rem 0.03rem 0.16rem 0.04rem;
  background: #fab220;
  color: #fff;
  display: inline-block;
  padding: 0.03rem 0.11rem;
  font-size: 0.32rem;
  margin-top: 0.04rem;
  margin-left: 0.11rem;
  max-width: 100%;
  word-break: break-all;
}

.sdw-buttonFool {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 55;
  flex-direction: column;
}

.rightAway-box {
  width: 100%;
  height: 1.04rem;
  background-color: #ffffdc;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 0.4rem;
  box-sizing: border-box;
  border-bottom: 0.03rem solid #ffe065;
}

.rightAway-box .left {
  font-size: 0.36rem;
  color: #282828;
  white-space: nowrap;
}

.rightAway-box .left .percent {
  font-size: 0.36rem;
  font-weight: bold;
  color: #e74c3c;
}

.rightAway-box .right {
  height: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  font-size: 0.36rem;
  white-space: nowrap;
  color: #4084ea;
}

.rightAway-box .rightImg {
  width: 0.18rem;
  height: 0.32rem;
}

.sdw-buttonFool .sdw-buttonBox {
  background-color: white;
  height: 1.28rem;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.sdw-buttonFool .sdw-buttonBox .btn {
  width: 2.16rem;
  height: 0.8rem;
  border: 1px solid #e74c3c;
  background-color: #ffffff;
  border-radius: 0.4rem;
  font-size: 0.4rem;
  color: #e74c3c;
  display: flex;
  justify-content: center;
  align-items: center;
}

.customer-title {
  height: 1.12rem;
  min-height: 1.12rem;
  width: 100%;
  background: #ffc100;
  color: #333;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0.42rem;
  font-weight: bold;
}

.Date-view {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  background-color: #fff;
  padding: 0.2rem 0;
}

.start-date {
  margin-right: 1.28rem;
}

.date-view-box {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}

.Date-view .label {
  line-height: 0.48rem;
  color: #8e8e8e;
  font-size: 0.32rem;
}

.Date-view .time {
  line-height: 0.64rem;
  color: #181818;
  margin-top: 0.08rem;
  font-size: 0.4rem;
}
</style>
